<template>
  <div>
    <h1>【aty-organ-tree】 component demo</h1>
    <p>【aty-organ-tree】 本质 对select-tree的封装</p>
    <aty-row class="fd-select-tree-box">

      <aty-title level="4">【有搜索-单选、多选】</aty-title>
      【单选】当前选中的值: <aty-text :text="value1"></aty-text>
      <aty-organ-tree select-type="user" v-model="value1" clearable/>
      【多选】当前选中的值: <aty-text :text="value2.join(',')"></aty-text>
      <aty-organ-tree multiple select-type="user" v-model="value2"/>

      <aty-title level="4">【没有搜索-单选、多选】</aty-title>
      【单选】当前选中的值: <aty-text :text="value3"></aty-text>
      <aty-organ-tree :can-search="false" select-type="user" v-model="value3" clearable/>
      【多选】当前选中的值: <aty-text :text="value4.join(',')"></aty-text>
      <aty-organ-tree :can-search="false" multiple select-type="user" v-model="value4"/>

      <aty-title level="4">【表单中-单选、多选】</aty-title>
      【单选】当前选中的值: <aty-text :text="value5"></aty-text>
      <aty-organ-tree label="单选" :can-search="true" select-type="user" v-model="value5" clearable/>
      【多选】当前选中的值: <aty-text :text="value6.join(',')"></aty-text>
      <aty-organ-tree label="多选" :can-search="true" multiple select-type="user" v-model="value6"/>

      <aty-title level="4">【改变值-单选、多选】</aty-title>
      <aty-button @click="clearSingle">清空</aty-button><aty-button @click="selectSingle">选择蔺树</aty-button><br>
      【单选】当前选中的值: <aty-text :text="value7"></aty-text>
      <aty-organ-tree :can-search="false" select-type="user" v-model="value7" clearable/>
      <aty-organ-tree :can-search="true" select-type="user" v-model="value7" clearable/>
      <aty-button @click="clearMul">清空</aty-button><aty-button @click="selectMul">选择蔺树</aty-button><br>
      【多选】当前选中的值: <aty-text :text="value8.join(',')"></aty-text>
      <aty-organ-tree :can-search="false" multiple select-type="user" v-model="value8"/>
      <aty-organ-tree :can-search="true" multiple select-type="user" v-model="value8"/>

      <aty-title level="4">【校验-单选、多选】</aty-title>
      【单选】当前选中的值: <aty-text :text="value5"></aty-text>
      <aty-organ-tree required label="单选" :can-search="true" select-type="user" v-model="value5" clearable/>
      【多选】当前选中的值: <aty-text :text="value6.join(',')"></aty-text>
      <aty-organ-tree required label="多选" :can-search="true" multiple select-type="user" v-model="value6"/>
    </aty-row>
    <!--fd-select-box  end-->
  </div>
</template>
<script>
export default {
  data () {
    return {
      value1: '19449',
      value2: ['19449', '10008'],
      value3: '19449',
      value4: ['19449', '10008'],
      value5: '19449',
      value6: ['19449', '10008'],
      value7: '19449',
      value8: ['19449', '10008'],
    }
  },
  computed: {
  },
  methods: {
    change () {
      Artery.message.info('change')
    },
    changeRoot () {
      this.rootId = '1066'
    },
    get() {
      console.log(this.$refs.tree.getSelectedData())
      Artery.message.info(JSON.stringify(this.$refs.tree.getSelectedData()))
    },
    clearSingle () {
      this.value7 = ''
    },
    selectSingle () {
      this.value7 = '16206'
    },
    clearMul () {
      this.value8 = []
    },
    selectMul () {
      this.value8 = ['16206']
    }
  },
  mounted () {

  }
}
</script>
<style lang="less" type="text/less">
    .fd-select-tree-box {
        margin: 0 20px;
        text-align:left;
        >.aty-row {
             padding-bottom: 10px;
         }
     }
</style>
